<template>
  <div class="alarmAmount-root">
    <formTitleVue
      title="城市详情信息"
      :selectOptions="selectOptions"
    />
    <myLine domId="cityDetail-echarts" height="30vh" :chartsData="chartsData" @MyLineClickFuc="MyLineClickFuc" />
  </div>
</template>

<script>
  import formTitleVue from "@/components/FormTitle/formTitle.vue";
  import {overviewCityDetailInfo} from "@/api/risk/cityWaringResult";
  import dayjs from "dayjs"
  import myLine from '@/components/Echarts/myLine.vue';

  export default {
    name: "cityDetail",
    components: {
      formTitleVue, myLine
    },
    props: {
      areaOptions: {},
      oneTargetOptions: {}
    },
    data() {
      return {
        chartsData: {
          xData: ["06", "07", "08", "09", "10"],
          yData: [],
        },
        selectOptions: [
          {
            key:"area",
            selectValue: "",
            options: [],
            changeFn: this.selectChange1,
          },
          // {
          //   key:"oneTarget",
          //   selectValue: "",
          //   options: [],
          //   changeFn: this.selectChange2,
          // },
        ],
        searChForm: {
          cityCode:"",
          oneTargetName:""
        },
      }
    },
    watch:{
      'areaOptions':{
        handler(newVal, oldVal) {
          this.selectOptions.forEach(t=> {
            if (t.key == 'area') {
              t.options = newVal
            }
          })
        },
        deep: true,
        immediate: true
      },
      // 'oneTargetOptions':{
      //   handler(newVal, oldVal) {
      //     this.selectOptions.forEach(t=> {
      //       if (t.key == 'oneTarget') {
      //         if(newVal){
      //           t.options =  newVal
      //         }
      //       }
      //     })
      //   },
      //   deep: true,
      //   immediate: true
      // },
    },
    methods: {
      MyLineClickFuc(params){
        console.log('MyLineClickFuc==',params)
        if(this.searChForm.cityCode==''){
          this.$message.warning("请选择具体城市跳转")
          return
        }
        let year = params.name
        this.$router.push({
                    // name: 'cityDetailDetail',
                    path:'/public/cityAnalysis/cityDetailDetail',
                    query: {
                        cityCode: this.searChForm.cityCode == ''?'44':this.searChForm.cityCode,
                        year: year,
                        checkType:''
              },
        })
      },
      selectChange1(item){
        this.searChForm.cityCode = item
        this.$emit("changeTarget", item, true)
        // this.searChForm.oneTargetName = ""
        // this.selectOptions[1].selectValue = ''
        this.search()
      },
      selectChange2(item){
        this.searChForm.oneTargetName = item
        this.search()
      },
      search() {
        this.fetch({
          ...this.searChForm,
        })
      },
      fetch(params = {}) {
        params.startTime =  dayjs().subtract(5, 'year').startOf("year").format("YYYY-MM-DD")
        params.endTime =  dayjs().subtract(0, 'year').endOf("year").format("YYYY-MM-DD")
        overviewCityDetailInfo(params).then(res => {
          if (res.code == 200) {
            console.log("城市详情数据=======",res.data)
            // this.tableData=res.data
            this.chartsData.xData= res.data.xAxle
            this.chartsData.yData= res.data.data
          } else {
            this.$message({
              message: this.$t('tips.systemException'),
              type: 'error'
            })
          }
        }).finally(final => {
        })
      },
      init(){
        this.searChForm.cityCode =  ""
        this.searChForm.oneTargetName = ""
        this.search()
      },
    },
    mounted() {
      this.init()
    },
  }
</script>

<style scoped>

</style>
